<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
polygon = {n:6, r:10};
$(function() {
   $(".hide").hide();
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.steps.push(function() {$(".step1").show();});
   sub.steps.push(function() {$(".step2").show();});
   sub.steps.push(function() {$(".step3").show();});
   sub.next= function () { return sub.index >= sub.steps.length };
    polygon.svg  = document.getElementsByTagName('svg')[0];
    polygon.n = 6;
    polygon.r = 30;
    var svgNS = polygon.svg.getAttribute('xmlns');
    polygon.pathEl = polygon.svg.getElementsByClassName('box')[0];
   polygon.path = new iPath().turtleLine({a: Math.PI*2 / polygon.n, r: polygon.r * Math.sin(Math.PI/polygon.n) * 2 }).repeat(polygon.n);
polygon.func = function(text,init) { 
      polygon.path = new iPath().turtleLine({a: Math.PI*2 / polygon.n, r: polygon.r * Math.sin(Math.PI/polygon.n) * 2 }).repeat(polygon.n);
      polygon.pathEl.setAttribute('d', "M 100 10" + polygon.path.dPath(3), init); 
};
buildInput('var:polygon.n, label:number of corners, defaultvalue:6, size:3, type:slider, max:100, min:3, step:1', {panelid: '#below', func:polygon.func});
buildInput('var:polygon.r, label:radius, defaultvalue:30, size:3, type:slider, max:60, min:5, step:0.2', {panelid: '#below', func:polygon.func});
polygon.func('',false);
});
</script>

    </head> 
<body class="jsxgraph_body"> 
<ul> 
<li class="step0"><div class="code"><pre>(turtle = new iPath()).turtleLine({a: Math.PI/3, r:100})</pre></div><p><div class="step1 hide">This will change the direction of the pencil 60 degrees clockwise and will draw a line of 100 units</div></li>
<li class="step2 hide">A regular polygon may be formed with <p><div class="code"><pre>polygon.iPath = new iPath().turtleLine({a: Math.PI*2 / polygon.n
  , r: polygon.r * Math.sin(Math.PI/polygon.n) * 2 }).repeat(polygon.n);</pre></code></li>
<li class="step3 hide"><div class="turtlegraphics container">
<div class="svg_border ">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="170"  width="300" baseProfile="full" viewbox="0 0 800 500"> 
    <g stroke="black" stroke-width="1" fill="none" transform="scale(5)">
    <path class="box">
    </g>
  </svg>
</div>
<div id="below">
</div>
</div>
</li>
</ul>
</body>
</html>
